<template>
    <div>
        <el-dialog  title="详情" :close-on-click-modal="false" v-model="dialogVisible" :before-close="handleClose">
            <div class="title">
                <div>提交人：{{inner.username  }}</div>
                <div>维修地址：{{ inner.address }}</div>
                <div>手机号：{{ inner.mobile }}</div>
            </div>
            <div class="content">
                <div>问题类型：<span>{{ inner.typename }}</span></div>
                <div>问题描述：{{ inner.content }}</div>
            </div>
            <div class="image">
                <el-image v-for="item in inner.images"
                     style="width:50px; height: 50px ;margin-left: 5px; " :src="baseUrl + item.url" :zoom-rate="1.2"
                    :max-scale="5" :min-scale="0.2"
                    :preview-src-list="inner.images.map((item: any) => baseUrl + item.url)" :initial-index="4"
                    preview-teleported fit="cover" />
            </div>
            <div class="schedule">
                <el-steps style="max-width: 600px" :space="200" :active="state" finish-status="success">
                    等待处理<el-step title="" />
                    正在处理<el-step title="" />
                    处理完成<el-step title="" />
                    已评价  <el-step title="" />
                </el-steps>
            </div>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"

const baseUrl = import.meta.env.VITE_IMG_URL
const active = ref(1)
defineProps({
    inner: {
        type: Object,
        default: () => ({})
    },
    state:{
        type:Number,
        default:0
    }
})
//添加页面显示
const dialogVisible = ref(true)
const emit = defineEmits(['close'])
const handleClose = () => {
    dialogVisible.value = false
    emit('close', [])
}
</script>

<style lang="less" scoped>
/deep/.el-dialog{
    width: 1000px;
    display: flex;
    flex-direction: column;
  text-align: center;
}
.title{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}
.content{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
    span{
        background-color: skyblue;
        padding: 5px;
        border-radius: 5px;
    }
}
.image{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 80px;
    align-items: center;
}
.schedule{
   margin-left: 180px;
   margin-top: 40px;
   margin-bottom: 20px;
}
</style>
